<template>
  <div class="create">
    <div class="list_item mt20">
      <div class="item_title"><span class="title_icon"></span>时段1</div>
      <el-form ref="ruleFormRef" :model="formData" label-width="" class="formTime" :disabled="type === 'look'">
        <el-form-item label="发送周期：">
          <div class="form_week">
            <el-checkbox-group v-model="welContent.week" class="selectTime">
              <el-checkbox label="1">周一</el-checkbox>
              <el-checkbox label="2">周二</el-checkbox>
              <el-checkbox label="3">周三</el-checkbox>
              <el-checkbox label="4">周四</el-checkbox>
              <el-checkbox label="5">周五</el-checkbox>
              <el-checkbox label="6">周六</el-checkbox>
              <el-checkbox label="7">周日</el-checkbox>
            </el-checkbox-group>
            <div class="del_week_icon" @click="delWel(welContent)"></div>
          </div>
        </el-form-item>
        <el-form-item label="发送时间：">
          <div class="block">
            <el-time-picker value-format="hh:mm:ss" v-model="welContent.send_time" is-range range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" />
          </div>
        </el-form-item>
      </el-form>
      <div class="selectWel">
        <el-radio-group v-model="welContent.type">
          <el-radio :label="1">新建欢迎语</el-radio>
          <el-radio :label="2">默认欢迎语</el-radio>
          <el-radio :label="3">已有欢迎语</el-radio>
        </el-radio-group>
      </div>
      <div class="item_con item_message_box pad12" v-show="welContent.type != 2">
        <el-input class="item_con_input input_textarea" type="textarea" :rows="4" v-model="welContent.content"
          placeholder="请输入欢迎语" maxlength="1000" show-word-limit @input="changeWords" />
        <div class="simple_fn">
          <div class="cus_name" @click="insetName">插入客户昵称</div>
          <div class="sele_text" @click="openUpload('1')">选择文本</div>
          <div class="emoj" @click="emojiVisible = !emojiVisible">😊</div>
        </div>
        <el-scrollbar class="upload_list_box" max-height="135px">
          <ul class="upload_list">
            <li class="upload_item" v-for="item in newArr" :key="item.id">
              <img class="file_icon" :src="item.cur_icon" alt="" />
              <div class="file_name">{{ item.name }}</div>
              <img class="del_icon" @click="remove(item)" src="@/assets/image/channel/remove_icon.png" />
            </li>
          </ul>
        </el-scrollbar>
        <el-popover popper-class="pop_select_box" placement="top-start" trigger="hover" :width="360">
          <template v-if="Number(9 - fileList.length) > 0" #reference>
            <div class="upload_btn" v-show="welContent.type != 3">
              <el-icon>
                <plus />
              </el-icon>
              <span class="upload_text">添加图片/视频/音频/文件/链接/抽奖</span>
            </div>
          </template>
          <template #default>
            <div class="upload_pop">
              <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="openUpload(item.id)">
                <img class="item_pop_icon" :src="item.icon" alt="" />
                <span class="item_pop_name">{{ item.name }}</span>
              </div>
            </div>
          </template>
        </el-popover>
        <!-- 表情管理 -->
        <div class="emoj_box">
          <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
        </div>
      </div>
      <div class="already" v-show="welContent.type == 3" @click="already">
        选择已有欢迎语
      </div>
    </div>

    <div class="prev_box">
      <div class="phone_con">
        <span class="phone-title">欢迎语预览</span>
        <el-scrollbar class="phone_List">
          <Friend :FriendDetail="fileList" />
        </el-scrollbar>
      </div>
    </div>
  </div>
  <!-- 标签弹框 -->
  <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />
  <!-- 素材标签 -->
  <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getMaterlib" />
  <Dialog :appDialog="appDialog">
    <el-table :data="tableData" ref="multipleTable" stripe height="580" style="width: 100%"
      header-row-class-name="table_header_title" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="content" label="欢迎语" min-width="220">
        <template v-slot="scope">
          <span class="text">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="welcome_friend_attachment" min-width="200">
        <template v-slot="scope">
          <template v-for="v in scope.row.welcome_friend_attachment" :key="v.id">
            <!-- // 图片 -->
            <el-tooltip :content="
              v.media_file.name +
              ' ' +
              (v.media_file.size / 1024 / 1024).toFixed(2) +
              'M'
            " placement="top" effect="light" v-if="v.type === 1">
              <el-image class="wel_content_file_item" :src="v.media_file.absolute_url || '/static/file/pic.png'"
                :preview-src-list="bigImgList" :preview-teleported="true" :initial-index="1" @click="BigImage(v.media_file.absolute_url)"
                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                <template #error>
                  <img style="width: 40px; height: 40px" src="/static/file/pic.png" alt="" />
                </template>
              </el-image>
            </el-tooltip>
            <!-- 视频 -->
            <el-tooltip :content="v.media_file.name" placement="top" effect="light" v-if="v.type === 2">
              <div class="pay-item">
                <div class="play"></div>
                <el-image class="wel_content_file_item" :src="v.media_file.absolute_url || '/static/file/pic.png'"
                  style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                  <template #error>
                    <el-image src="/static/file/mov.png" alt=""></el-image>
                  </template>
                </el-image>
              </div>
            </el-tooltip>
            <!-- 链接 -->
            <el-tooltip v-if="v.type === 3" :content="v.link_title || '暂无标题'" placement="top" effect="light">
              <img class="wel_content_file_item" src="/static/file/link.png"
                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
            <!-- 音频 -->
            <el-tooltip :content="
              v.media_file.name +
              ' ' +
              (v.media_file.size / 1024 / 1024).toFixed(2) +
              'M'
            " placement="top" effect="light" v-if="v.type === 4">
              <img class="wel_content_file_item" src="/static/file/mp3.png"
                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
            <!-- 文件 -->
            <el-tooltip :content="
              v.media_file.name +
              ' ' +
              (v.media_file.size / 1024 / 1024).toFixed(2) +
              'M'
            " placement="top" effect="light" v-if="v.type === 5">
              <img class="wel_content_file_item" :src="getSuffixIcon(v.media_file.name)"
                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="send_times" label="消息数量" width="125"> </el-table-column>
      <!-- 部门、员工 -->
      <el-table-column prop="depart" label="生效部门、员工" min-width="150">
        <template v-slot="scope">
          <div class="depart_main">
            {{
                scope.row.department.length > 0
                  ? getSetionId("name", scope.row.department).join("、")
                  : " "
            }}
            {{
                scope.row.work_user.length > 0
                  ? getSetionId("name", scope.row.work_user).join("、")
                  : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="创建人" min-width="150"></el-table-column>
      <el-table-column prop="user_local_department" label="所在部门" min-width="150">
        <template v-slot="scope">
          <span>{{
              scope.row.user_local_department && scope.row.user_local_department.length > 0
                ? getSetionId("name", scope.row.user_local_department).join("、")
                : "--"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="200"></el-table-column>
      <el-table-column prop="updated_at" label="修改时间" min-width="200"></el-table-column>
      <template #empty>
        <el-empty :image-size="150" description="您还没有创建欢迎语">
          <template #image>
            <img src="/static/noBind.png" alt="" />
            <el-button type="primary" size="small" @click="
              router.push('/channel/qwbasicoperation/welcomefriend/addWelcomFriend')
            ">创建欢迎语</el-button>
          </template>
        </el-empty>
      </template>
    </el-table>
    <ZWPagination ref="PaginationRef" @submit="getChannelFriendList" />
  </Dialog>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, watch, onBeforeUnmount } from "vue";
import ZWEmoji from "@/components/ZWEmoji.vue";
import ZWMatericalLib from "@/components/channel/ZWMatericalLib.vue";
import ZWPagination from "@/components/ZWPagination.vue";

import Friend from "./Friend.vue";
import Dialog from "@/components/Dialog.vue";

import { getSuffixIcon, getSetionId, IsNotEmpty } from "@/utils/utils";
import { channelFriendList } from "@/api/channel/qwbase";
import router from "@/router";
import { useStore } from "@/store";
import bus from "@/utils/bus";

const props = defineProps(["welContent", "type"]);
const emit = defineEmits(["delWel"]);

const store = useStore();
const multipleTable = ref();
const newArr = ref([]);
const uId = ref();
const ZWMatericalLibRef = ref(null);
const BatchLabelRef = ref(null);
const emojiVisible = ref(false);
const fileList = ref([]);
const fileList2 = ref([]);
const uploadList = reactive([
  { id: "2", icon: "/static/file/pic.png", name: "图片" },
  { id: "3", icon: "/static/file/mp3.png", name: "音频" },
  { id: "4", icon: "/static/file/mov.png", name: "视频" },
  { id: "5", icon: "/static/file/ysb.png", name: "文件" },
  { id: "6", icon: "/static/file/link.png", name: "连接" },
]);

// from 表单收集的数据
const formData = reactive({
  content: "", // 欢迎语文本
  week: [],
  start_time: "",
  end_time: "",
  selectWel: "",
});
const tableData = ref([]); //已有欢迎语数据
const seleItem = ref(); // 选中的欢迎语数据

// 移除欢迎语
const delWel = (data: any) => {
  emit("delWel", data);
};
// 处理欢迎语数据
const dispose = () => {
  props.welContent.local_link = [];
  props.welContent.local_content = [];
  props.welContent.attachment = [];
  fileList.value.forEach((item: any) => {
    console.log(item, "UUUUUU")
    if (item.type != 1) {
      if (item.is_local) {
        if (item.type == 6) {
          props.welContent.local_link.push({
            link_title: item.title,
            link_url: item.link_url,
            link_decs: item.link_desc,
            link_share_image: item.cover_image_url,
          });
        } else {
          props.welContent.local_content.push({
            code: item.code,
            type: item.type2,
          });
        }
      } else {
        props.welContent.attachment.push({
          media_content_id: item.fromList ? item.content_id : item.id,
          type: item.type2,
        });
        // console.log(props.welContent.attachment, "jingjing")
      }
    }
  });

};
bus.on("dispose", dispose);
// 获取已有素材文件列表
const getChannelFriendList = (data?: any) => {
  channelFriendList({
    page: 1,
    page_size: data?.page_size || 15,
    ...data,
  }).then((res: any) => {
    tableData.value = res.data;
    store.dispatch("pageTotal", res.total);
  });
};
// 选择已有素材取消
const cancelHandel = () => {
  appDialog.visible = false;
};
// 选择已有素材确认
const submitHandel = () => {
  const { content } = seleItem.value;
  props.welContent.content = content;
  seleItem.value.welcome_friend_attachment.forEach((item: any) => {
    if (item.type !== 3) {
      if (item.type === 1) {
        item.media_file.cur_icon = "/static/file/pic.png";
        item.media_file.type = 2;
        item.media_file.type2 = 1;
        item.media_file.id = item.id;
        item.media_file.content_id = item.content_id
        // item.media_file.user_name = res.user_name
      }
      if (item.type === 2) {
        item.media_file.cur_icon = "/static/file/mov.png";
        item.media_file.thumbnail_url = `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`;
        item.media_file.type = 4;
        item.media_file.type2 = 2;
        item.media_file.id = item.id;
        item.media_file.content_id = item.content_id

        // item.media_file.user_name = res.user_name
      }
      if (item.type === 4) {
        item.media_file.cur_icon = "/static/file/mp3.png";
        item.media_file.type2 = 4;
        item.media_file.type = 3;
        item.media_file.id = item.id;
        item.media_file.content_id = item.content_id

        // item.media_file.user_name = res.user_name
      }
      if (item.type === 5) {
        let file = {
          type2: 5,
          type: 5,
          id: item.id,
          title: item.media_file.name,
          name: item.media_file.name,
          user_name: item.user_name,
          mediaFileInfo: {
            size: item.media_file?.size,
          },
          cur_icon: url(item.media_file),
        };
        fileList.value.push(file);
        fileList2.value.push(file);
      }
      if (item.type != 5) {
        fileList.value.push(item.media_file);
        fileList2.value.push(item.media_file);
        newArr.value.push(item.media_file);
      }
    } else {
      let link = {
        name: item.link_title ? item.link_title : '',
        is_local: item.content_id == 0 ? true : false,
        title:
          item.content_id == 0 ? (item.link_title ? item.link_title : '') : (item.media_content_link ? item.media_content_link.link_title : ''),
        // item.content_id == 0 ? item.link_title : item.link_title,
        cover_image_url:
          item.content_id == 0
            ? item.link_share_image
            : item.media_content_link?.cover_image_url,
        link_decs:
          item.content_id == 0 ? item.link_decs : (item.media_content_link ? item.media_content_link.content : ''),
        cur_icon: "/static/file/link.png",
        link_url: item.content_id == 0 ? item.link_url : (item.media_content_link ? item.media_content_link.ref_url : ''),
        type: 6,
        type2: 3,
        id: item.id,
        content_id: item.content_id

      };
      fileList.value.push(link);
      fileList2.value.push(link);
      newArr.value.push(link);
    }
  });
  dispose();
  cancelHandel();
};

// 选择已有欢迎语
const already = (data?: any) => {
  getChannelFriendList();
  appDialog.visible = true;
};
// 单选欢迎语
const handleSelectionChange = (selection: any) => {
  if (selection.length > 1) {
    multipleTable.value.clearSelection();
    multipleTable.value.toggleRowSelection(selection.pop());
  } else {
    seleItem.value = selection;
  }
  seleItem.value = selection[0];
};
//表情包管理
const chooseEmoji = (emoji: any) => {
  //事件。数据包含文本区域的值
  props.welContent.content = props.welContent.content + emoji;
  emojiVisible.value = false;
  fileList.value[0] = {
    type: 1,
    content: props.welContent.content,
  };
};
// 删除上传的文件
const remove = (data: any) => {
  if (props.type === "look") return;
  if (data.code) {
    fileList.value = fileList.value.filter((item: any) => item.code != data.code);
    newArr.value = newArr.value.filter((item: any) => item.code != data.code);
  } else {
    fileList.value = fileList.value.filter((item: any) => item.id != data.id);
    newArr.value = newArr.value.filter((item: any) => item.id != data.id);
  }
  fileList2.value = fileList.value;
};
//打开上传文件弹框
const openUpload = (num: string) => {
  if (props.type == "look") return;
  ZWMatericalLibRef.value.materVisible = true;
  ZWMatericalLibRef.value.baseId = num; //打开对应的基础素材
  ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length); //打开对应的基础素材
  console.log(Number(9 - fileList.value.length), "上传搜索===fileList.value.length");
};
// 插入名字
const insetName = () => {
  props.welContent.content += "##客户姓名## ";
  fileList.value[0] = {
    type: 1,
    content: props.welContent.content,
  };
};
//更改欢迎语
const changeWords = () => {
  fileList.value[0] = {
    type: 1,
    content: props.welContent.content,
  };
  console.log("嫦娥", fileList.value);
};
// 获取选择的信息
const getMaterlib = (res?: any) => {
  // 文本
  if (res.type == 1) {
    console.log(res.data[0].content, "==wenben ");
    props.welContent.content += res.data[0].content;
    if (props.welContent.content.length >= 1000) {
      ElMessage.warning('字数已经超过规定最大字数')
      return
    }
    fileList.value[0] = {
      type: 1,
      content: props.welContent.content,
    };
  } else {
    let result = [];
    if (res.data.length > 0) {
      res.data.forEach((item: any) => {
        item.type = res.type;
        result.push(item);
      });
    }
    if (res.local) {
      fileList.value = fileList.value.concat(changeLocalType(result));
    } else {
      fileList.value = fileList.value.concat(changeType(result));
    }
  }
  newArr.value = fileList.value.filter((item: any) => {
    return item.type != 1;
  });
  props.welContent.local_link = [];
  props.welContent.local_content = [];
  props.welContent.attachment = [];
  fileList.value.forEach((item: any) => {
    if (item.type != 1) {
      if (item.is_local) {
        if (item.type == 6) {
          props.welContent.local_link.push({
            link_title: item.title,
            link_url: item.link_url,
            link_decs: item.link_desc,
            link_share_image: item.cover_image_url,
          });
        } else {
          props.welContent.local_content.push({
            code: item.code,
            type: item.type2,
          });
        }
      } else {
        props.welContent.attachment.push({
          media_content_id: item.id,
          type: item.type2,
        });
      }
    }
  });
};
// 转换本地上传的数据
const changeLocalType = (data: any[]) => {
  let result = [];
  if (data.length > 0) {
    data.forEach((item: any) => {
      // 图片
      if (item.type == 2) {
        item.cur_icon = "/static/file/pic.png";
        item.name = item.name;
        item.title = item.name;
        item.absolute_url = item.url;
        item.type2 = 1;
      }
      ///视频
      if (item.type == 4) {
        item.cur_icon = "/static/file/mov.png";
        item.name = item.name;
        item.title = item.name;
        item.type2 = 2;
      }
      // 音频
      if (item.type == 3) {
        item.cur_icon = "/static/file/mp3.png";
        item.name = item.name;
        item.title = item.name;
        item.type2 = 4;
      }
      // 链接
      if (item.type == 6) {
        item.cur_icon = "/static/file/link.png";
        item.name = item.title;
        item.type2 = 3;
      }
      // 文件
      if (item.type == 5) {
        item.cur_icon = getSuffixIcon(item.url);
        item.name = item.name;
        item.title = item.name;
        item.type2 = 5;
      }
      item.is_local = true;
      result.push(item);
    });
  }
  console.log(result, "-=-=-=-=-=e本地上传的信息");
  return result;
};
// 转换选中信息
const changeType = (data: any[]) => {
  let result = [];
  if (data.length > 0) {
    data.forEach((item: any) => {
      // 图片
      if (item.type == 2) {
        item.cur_icon = "/static/file/pic.png";
        item.name = item.file_name;
        item.type2 = 1;
      }
      ///视频
      if (item.type == 4) {
        item.cur_icon = "/static/file/mov.png";
        item.name = item.file_name;
        item.type2 = 2;
      }
      // 音频
      if (item.type == 3) {
        item.cur_icon = "/static/file/mp3.png";
        item.name = item.file_name;
        item.type2 = 4;
      }
      // 链接
      if (item.type == 6) {
        item.cur_icon = "/static/file/link.png";
        item.name = item.title;
        item.type2 = 3;
      }
      // 文件
      if (item.type == 5) {
        item.cur_icon = getSuffixIcon(item.mediaFileInfo?.absolute_url);
        item.name = item.mediaFileInfo?.name;
        item.type2 = 5;
      }
      result.push(item);
    });
  }
  return result;
};
// // 数据转换
const changeInfo = () => {
  fileList.value.forEach((item: any) => {
    if (item.type != 1) {
      if (item.is_local) {
        if (item.type == 6) {
          props.welContent.local_link.push({
            link_title: item.title,
            link_url: item.link_url,
            link_decs: item.link_desc,
            link_share_image: item.cover_image_url,
          });
        } else {
          props.welContent.local_content.push({
            code: item.code,
            type: item.type2,
          });
        }
      } else {
        props.welContent.attachment.push({
          media_content_id: item.id,
          type: item.type2,
        });
      }
    }
  });
}
// 弹框配置项
const appDialog = reactive({
  visible: false,
  title: "选择已有欢迎语",
  width: "1200px",
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: "取消",
  submitText: "保存",
  isInit: false, //是否重置
  isChooseDisabled: false, //重新打开传递进来的数据是否重置
  chooseArr: [], // 传递进来选中的数据
});
//获取文件类型
const url = (data: any) => {
  let fileTYpe = {
    ".pdf": "/static/file/pdf.png",
    ".doc": "/static/file/doc.png",
    ".docx": "/static/file/doc.png",
    ".xls": "/static/file/xls.png",
    ".xlsx": "/static/file/xls.png",
    ".ppt": "/static/file/ppt.png",
    ".pptx": "/static/file/ppt.png",
  };
  console.log(data.name, "jingjing");
  if (data.name) {
    const last = data.name.substring(data.name.lastIndexOf("."));
    return fileTYpe[last] || "/static/file/file.png";
  }
  const last = data.name.substring(data.name.lastIndexOf("."));
  return fileTYpe[last] || "/static/file/file.png";
};
watch(
  () => props.welContent,
  (val: any) => {
    if (props.type == "edit" || props.type == "look") {
      val.attachment.forEach((item: any) => {
        item.media_file.fromList = true;
        if (item.type !== 3) {
          if (item.type === 1) {
            item.media_file.cur_icon = "/static/file/pic.png";
            item.media_file.type = 2;
            item.media_file.type2 = 1;
            item.media_file.id = item.id;
            item.media_file.content_id = item.content_id;
            // item.media_file.user_name = item.media_file.name;
          }
          if (item.type === 2) {
            item.media_file.cur_icon = "/static/file/mov.png";
            item.media_file.thumbnail_url = `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`;
            item.media_file.type = 4;
            item.media_file.type2 = 2;
            item.media_file.id = item.id;
            item.media_file.content_id = item.content_id;

          }
          if (item.type === 4) {
            item.media_file.cur_icon = "/static/file/mp3.png";
            item.media_file.type2 = 4;
            item.media_file.type = 3;
            item.media_file.id = item.id;
            item.media_file.content_id = item.content_id;

          }
          if (item.type === 5) {
            let file = {
              is_local: item.content_id == 0 ? true : false,
              fromList: true, // 数据来自详情
              type2: 5,
              type: 5,
              id: item.id,
              title: item.media_file.name,
              name: item.media_file.name,
              content_id: item.content_id,
              code: item.media_file.code,
              // user_name: res.user_name,
              mediaFileInfo: {
                size: item.media_file?.size,
              },
              cur_icon: url(item.media_file),
            };
            fileList.value.push(file);
            fileList2.value.push(file);
            newArr.value.push(file);
          }
          if (item.type != 5) {
            fileList.value.push(item.media_file);
            fileList2.value.push(item.media_file);
            newArr.value.push(item.media_file);
          }
        } else {
          let link = {
            fromList: true,
            name: item.link_title,
            is_local: item.content_id == 0 ? true : false,
            title:
              item.content_id == 0 ? (item.link_title ? item.link_title : '') : (item.media_content_link ? item.media_content_link.link_title : ''),
            // item.content_id == 0 ? item.link_title : item.link_title,
            cover_image_url:
              item.content_id == 0
                ? item.link_share_image
                : item.media_content_link?.cover_image_url,
            link_decs:
              item.content_id == 0 ? item.link_decs : (item.media_content_link ? item.media_content_link.content : ''),
            cur_icon: "/static/file/link.png",
            link_url: item.content_id == 0 ? item.link_url : (item.media_content_link ? item.media_content_link.ref_url : ''),
            type: 6,
            type2: 3,
            id: item.id,
            content_id: item.content_id
          };
          fileList.value.push(link);
          fileList2.value.push(link);
          newArr.value.push(link);
        }
      });
      dispose()
    }
  },
  { immediate: true }
);
defineExpose({ changeInfo, dispose });

onBeforeUnmount(() => {
  bus.off("dispose", dispose);
});

</script>

<style lang="scss" scoped>
.pop_select_box {
  height: 84px;

  .upload_btn {
    margin-top: 8px;
  }

  .upload_pop {
    background: #ffffff;
    border-radius: 12px;
    // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-around;

    .item_pop {
      width: 60px;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;

      .item_pop_icon {
        width: 40px;
      }

      .item_pop_name {
        font-size: 14px;
        margin-top: 2px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a1918;
      }
    }
  }
}

.welcome {
  width: 100%;

  .el-form-item {
    margin-bottom: 0px;
  }

  .create {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;

    .list_item {
      padding-left: 18px;
      padding-right: 132px;

      //   border-right: 1px solid #eaeaea;
      .item_title {
        font-size: 14px;
        line-height: 18px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        margin-bottom: 16px;

        .title_icon {
          display: block;
          height: 18px;
          width: 3px;
          background: #ff6b00;
          float: left;
          margin-left: -15px;
        }
      }

      .item_con_input {
        width: 470px;
      }

      .item_con {
        .radio_group {
          margin-right: 15px;
        }

        .cus_type_0 {
          margin-top: 20px;
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          font-weight: 300;
          color: #33302d;

          span {
            color: #ff6b00;
          }
        }

        .form_cus_type {
          margin-top: 5px;

          .el-form-item__content {
            .form_item_input {
              .el-input__inner {
                width: 253px !important;
              }
            }
          }
        }

        .input_textarea {
          width: 100%;

          :deep(.el-textarea__inner) {
            height: 170px;
            background: #f8f8f8;
            border: 0;
            box-shadow: none;
            border-bottom: 1px solid #eaeaea;
            padding: 5px 0;
          }
        }
      }

      .item_message_box {
        background: #f8f8f8;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        width: 580px;
        height: 380px;
        position: relative;

        .simple_fn {
          margin-top: 5px;

          display: flex;
          align-items: center;
          font-family: STHeitiSC-Light, STHeitiSC;
          font-weight: 300;
          color: #33302d;
          padding-bottom: 6px;
          border-bottom: 1px solid #eaeaea;

          .cus_name {
            margin-right: 18px;
            color: #ff6b00;
            cursor: pointer;
          }

          .emoj {
            margin-left: 5px;
            cursor: pointer;
          }

          .sele_text {
            cursor: pointer;
          }
        }

        .upload_list_box {
          overflow: hidden;
          height: 135px;
        }

        .upload_list {
          .upload_item {
            margin-top: 5px;
            width: 440px;
            height: 32px;
            box-sizing: border-box;
            background: #eaeaea;
            display: flex;
            padding: 0px 10px 0px 14px;
            align-items: center;

            .file_icon {
              width: 20px;
              height: 20px;
              margin-right: 7px;
            }

            .file_name {
              width: 375px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            .del_icon {
              width: 10px;
              height: 10px;
              cursor: pointer;
            }
          }
        }

        .upload_btn {
          margin-top: -20px;
          margin-left: 12px;
          width: 287px;
          height: 32px;
          background: #f8f8f8;
          border: 1px solid #d9d9d9;
          padding: 0 12px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: STHeitiSC-Light, STHeitiSC;
          font-weight: 300;
          color: #969696;

          .upload_text {
            margin-left: 8px;
          }
        }

        .upload_pop {
          position: absolute;
          bottom: 50px;
          left: -20px;
          width: 360px;
          height: 84px;
          background: #ffffff;
          border-radius: 12px;
          box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
          display: flex;
          align-items: center;
          justify-content: space-around;

          .item_pop {
            width: 60px;
            height: 62px;
            background: #ffffff;
            border-radius: 6px;
            border: 1px solid #f9f9f9;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;

            .item_pop_icon {
              width: 40px;
            }

            .item_pop_name {
              font-size: 14px;
              margin-top: 2px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #1a1918;
            }
          }

          &::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translate(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #fff;
          }
        }

        .emoj_box {
          width: 270px;
          position: absolute;
          top: -40px;
        }
      }
    }

    .prev_box {
      flex: 1;

      .phone_con {
        position: relative;
        margin: 80px auto;
        width: 244px;
        height: 495px;
        box-sizing: border-box;
        border-radius: 36px;
        border: 9px solid #eef5fe;
        background: url("@/assets/image/channel/phone_bg.png");
        background-size: cover;

        .phone-title {
          position: absolute;
          top: -40px;
          left: 75px;
        }

        .phone_List {
          width: 100%;
          box-sizing: border-box;
          position: absolute;
          top: 48px;
          height: 380px;
          bottom: 48px;
          padding: 7px 10px;
        }
      }
    }
  }

  .already {
    color: #ff6b00;
    width: 120px;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
    border: 1px solid #ff6b00;
    border-radius: 4px 4px 4px 4px;
  }

  .timeTitle {
    display: flex;
    align-items: center;
    background: #fffaf9;
    width: 580px;
    line-height: 40px;
    padding: 0 20px;

    &_icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff6b00;
      margin-right: 10px;
    }
  }
}

.formTime {
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #eaeaea;

  .form_week {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .del_week_icon {
      width: 17px;
      height: 16px;
      margin-top: -12px;
      background: url("@/assets/image/LiveCode/del_icon.png") center/100% no-repeat;
    }

    .selectTime {
      :deep .el-checkbox {
        margin-right: 10px;
      }
    }
  }

  .block {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .time_border {
      width: 14px;
      margin: 0 13px;
      border-top: 1px solid #969696;
    }

    .del_time {
      width: 17px;
      height: 16px;
      margin-left: 10px;
      background: url("@/assets/image/LiveCode/del_icon.png") center/100% no-repeat;
    }
  }

  :deep(.el-textarea__inner) {
    border: none;
    box-shadow: none;
    background: #fbfbfb;
  }

  :deep .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 110px;
  }

  :deep .el-input--prefix .el-input__inner {
    width: 110px;
    padding: 0px 12px;
  }
}

.selectWel {
  margin: 10px 0;
}

.table_header_title {
  height: 60px;

  th.el-table__cell {
    background: #f9f9f9;
    padding: 10px 0;
  }
}

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 240px;
}
</style>
